<template>
  <div class="console-panel">
    <div class="console-tabs">
      <button
          v-for="tab in tabs"
          :key="tab.id"
          :class="['tab-button', { 'active': activeTab === tab.id }]"
          @click="activeTab = tab.id"
      >
        {{ tab.label }}
      </button>
    </div>

    <div class="console-content">
      <div class="log-container" ref="logContainer">
        <div
            v-for="(log, index) in logs"
            :key="index"
            :class="['log-entry', log.type]"
        >
          <span class="timestamp">[{{ log.timestamp }}]</span>
          <span class="log-message">{{ log.message }}</span>
          <span class="log-extra" v-if="log.extra">{{ log.extra }}</span>
        </div>
      </div>

      <div class="command-input">
        <input
            v-model="command"
            type="text"
            placeholder="输入命令并按Enter执行..."
            @keyup.enter="executeCommand"
        >
        <button class="btn primary" @click="executeCommand">
          <i class="icon-send"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch, nextTick } from 'vue'

export default {
  name: 'ConsolePanel',
  setup() {
    const activeTab = ref('logs')
    const logs = ref([])
    const command = ref('')
    const logContainer = ref(null)

    const tabs = [
      { id: 'logs', label: '日志' },
      { id: 'errors', label: '错误' },
      { id: 'warnings', label: '警告' }
    ]

    // 自动滚动到底部
    const scrollToBottom = () => {
      nextTick(() => {
        if (logContainer.value) {
          logContainer.value.scrollTop = logContainer.value.scrollHeight
        }
      })
    }

    // 添加日志
    const addLog = (message, type = 'log', extra = null) => {
      const timestamp = new Date().toLocaleTimeString()
      logs.value.push({
        message,
        type,
        timestamp,
        extra
      })
      scrollToBottom()
    }

    // 执行命令
    const executeCommand = () => {
      if (!command.value.trim()) return

      try {
        // 添加输入命令到日志
        addLog(`> ${command.value}`, 'command')

        // 执行命令
        const result = new Function(`return (${command.value})`)()

        // 添加执行结果到日志
        addLog(result, 'result', typeof result)
      } catch (error) {
        addLog(error.message, 'error', error.stack)
      }

      command.value = ''
    }

    // 模拟一些初始日志
    addLog('控制台已初始化', 'info')
    addLog('准备接收命令', 'info')
    addLog('未处理的错误示例', 'error', 'Error: Something went wrong at line 42')

    return {
      activeTab,
      tabs,
      logs,
      command,
      logContainer,
      executeCommand,
      addLog
    }
  }
}
</script>

<style scoped>
.console-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
}

.console-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.tab-button {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border-bottom: 2px solid transparent;
}

.tab-button:hover {
  background: rgba(255, 255, 255, 0.05);
}

.tab-button.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.console-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.log-container {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 10px;
  font-family: 'Fira Code', monospace;
  font-size: 0.9rem;
}

.log-entry {
  margin-bottom: 8px;
  padding: 5px;
  border-radius: 4px;
  word-break: break-word;
}

.log-entry.log {
  color: var(--text-primary);
}

.log-entry.error {
  color: var(--secondary-color);
  background: rgba(255, 31, 113, 0.1);
}

.log-entry.warning {
  color: var(--warning-color);
  background: rgba(255, 215, 0, 0.1);
}

.log-entry.info {
  color: var(--accent-color);
}

.log-entry.command {
  color: var(--primary-color);
}

.log-entry.result {
  color: var(--text-secondary);
}

.timestamp {
  color: var(--text-secondary);
  margin-right: 8px;
  font-size: 0.8rem;
}

.log-extra {
  display: block;
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-top: 4px;
  opacity: 0.8;
}

.command-input {
  display: flex;
  gap: 10px;
}

.command-input input {
  flex: 1;
  padding: 10px 15px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: 'Fira Code', monospace;
}

.icon-send {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23111'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19l9 2-9-18-9 18 9-2zm0 0v-8' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
</style>
